import { useRequest } from 'ahooks'
import { useEffect, useState } from 'react'
import { Http } from '../../../../Common/Api'
import './Scss/TunnelDetails.scss'

export const TunnelDetails001 = () => {
    const [Data, setData] = useState([])
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: list => {
            let data = []
            list.forEach(
                ({ uuid, tableName, totalLength, completedLength }) =>
                    (data = [...data, { uuid, title: tableName, number: totalLength, value: completedLength }]),
            )
            setData(data)
        },
    })

    useEffect(() => {
        runAsync({ url: 'getGetTunnelLength' })
    }, [runAsync])

    return (
        <div className="TunnelDetails001">
            {Data.map(({ uuid, title, number, value }) => (
                <div key={uuid}>
                    <div>{title}</div>
                    <div>
                        <div>总长</div>
                        <div>{number}m</div>
                    </div>
                    <div>
                        <div>完成长度</div>
                        <div>{value}m</div>
                    </div>
                </div>
            ))}
        </div>
    )
}
